<template>
  <div id="detailapplybox" class="rightBodyContent">
    <div class="rightBodyContent-in">
      <el-button type="primary" plain @click="backlist" size="small"><i class="el-icon-back"></i>返回列表</el-button>
      <div class="applybody mt-20">
        <!--本体列表，数据 -->
        <div class="table-body">
          <div class="table-body-box">
            <el-table
                    ref="multipleTable"
                    :data="arryList"
                    :stripe="tableStyle.tableStripe"
                    :border="tableStyle.tableBorder"
                    tooltip-effect="dark"
                    style="width: 100%"
                    header-cell-class-name="table-text-c"
                    cell-class-name="table-text-c">
              <el-table-column
                      prop="create_time"
                      label="反馈时间">
              </el-table-column>
              <el-table-column
                      label=" 反馈人">
                <template slot-scope="scope">
                  <span v-if="scope.row.name">{{scope.row.name}}({{scope.row.parents.relation}})</span>
                  <span v-else class="c-danger">无数据</span>
                </template>
              </el-table-column>
              <el-table-column
                      label="对应学生">
                <template slot-scope="scope">
                  <span v-if="scope.row.student">{{scope.row.student.name}}</span>
                  <span v-else class="c-danger">无数据</span>
                </template>
              </el-table-column>
              <el-table-column
                      label="匹配状态">
                <template slot-scope="scope">
                  已匹配
                </template>
              </el-table-column>
              <el-table-column
                      label="签名"
                      width="200">
                <template slot-scope="scope">
                  <!--<el-button type="primary" size="small" @click="gotoDetail(scope.row.pic)">查看签名</el-button>-->
<!--                  <img :src="scope.row.pic" alt="" @click="gotoDetail(scope.row.pic)" class="showImgCheck">-->
<!--                  <p></p>-->
                  <viewerModle type="1" :imgSrc="scope.row.pic?scope.row.pic:''"></viewerModle>
                </template>
              </el-table-column>
              <el-table-column
                      label="承诺书"
                      width="200"
                      :key="1"
                      v-if="commitmentStatus">
                <template slot-scope="scope">
                  <div v-if="editId!=='36'">
                    <el-button type="primary" size="small" @click="checkStudent(scope.$index)"
                               v-if="scope.row.is_commitment_sign==1">预览打印承诺书
                    </el-button>
                    <span v-else>无需打印</span>
                  </div>
                  <div v-else>
                    <el-button type="primary" size="small" @click="checkStudent(scope.$index)">预览打印承诺书
                    </el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <!--工具条 分页-->
        <el-col :span="24" class="toolbar">
          <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="page.total"
                  :page-size="page.pagesize"
                  @current-change="handleSizeChange">
          </el-pagination>
        </el-col>
      </div>
    </div>
    <print :visible.sync="printvisible" :studentInfo="studentInfo" type="1"></print>
  </div>
</template>

<script>
  import {pagination, tableoption} from '@/utils/util.js'
  import print from '@/components/dialog/print.vue'

  export default {
    components: {
      print
    },
    data () {
      return {
        printvisible: false,
        editId: this.$route.query.editId,
        // 设置table样式
        tableStyle: tableoption,
        arryList: [],
        // 设置table页面分页所需
        page: {
          pageindex: pagination.pageIndex,
          pagesize: pagination.pageSize,
          total: pagination.total
        },
        commitmentStatus: false,
        studentInfo: {} // 学生签名信息
      }
    },
    created () {
      this.InitFn()
    },
    methods: {
      InitFn () {
        this.$fetch(this.api.admin_questionnaire_user, {id: this.editId, p: this.page.pageindex}).then((response) => {
          if (response.code === 0) {
            this.commitmentStatus = response.is_commitment
            this.arryList = response.list.data
            this.page.total = response.list.total
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      backlist () {
        this.$router.go(-1)
      },
      // 分页
      handleSizeChange (val) {
        this.page.pageindex = val
        this.InitFn()
      },
      checkStudent (index) {
        console.log(this.printvisible)
        this.studentInfo = this.arryList[index]
        this.printvisible = true
      }
    },
    mounted () {
    }
  }
</script>


